<template>
  <div class="add-form">
    <div class="nb-tittle">{{ title }}</div>
    <el-form ref="form" :model="data" inline label-width="100px" hide-required-asterisk class="hx-form" :rules="rules">
      <el-row class="return-form">
        <el-col :span="7">
          <el-form-item label="公司名称：" prop="name">
            <el-input v-model="data.name" />
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="归属人：">
            <el-input v-model="userName" readonly />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="return-form">
        <el-col :span="7">
          <el-form-item label="部门：" prop="department">
            <el-input v-model="data.department" />
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="职务：" prop="post">
            <el-input v-model="data.post" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="return-form">
        <el-col :span="7">
          <el-form-item label="客户状态：" prop="status">
            <el-select v-model="data.status" placeholder="请选择" style="width: 160px">
              <el-option v-for="item in customerStatus" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="姓名：" prop="contact_name">
            <el-input v-model="data.contact_name" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="return-form">
        <el-col :span="7">
          <el-form-item label="手机：" prop="tel">
            <el-input v-model="data.tel" />
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="电话：" prop="phone">
            <el-input v-model="data.phone" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="return-form">
        <el-col :span="7">
          <el-form-item label="开始时间：">
            <el-date-picker v-model="data.start_time" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" class="detail-select" />
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="备注：">
            <el-input v-model="data.content" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item style="margin:40px 20px 0">
        <el-button type="primary" @click="submitForm('form')">提交</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
      <el-tabs v-if="editId" v-model="activeName" style="margin-top: 30px">
        <el-tab-pane label="联系人列表" name="first">
          <el-table :data="contactsList" stripe style="width: 100%">
            <el-table-column prop="department" label="部门" min-width="25%" />
            <el-table-column prop="name" label="姓名" min-width="25%" />
            <el-table-column prop="post" label="职位" min-width="21%" />
            <el-table-column prop="phone" label="电话" min-width="21%" />
            <el-table-column label="操作" align="center" min-width="8%">
              <template slot-scope="{row}">
                <el-button type="danger" size="mini" @click="contactRemove(row.id)">删除</el-button>
              </template>
            </el-table-column>
            <template slot="append">
              <el-form ref="contactForm" :model="contactData" inline hide-required-asterisk :rules="contactRules">
                <el-row :gutter="20" style="margin: 20px 0 20px">
                  <el-col :span="6"><el-input v-model="contactData.department" placeholder="部门" /></el-col>
                  <el-col :span="6"><el-input v-model="contactData.name" placeholder="姓名" /></el-col>
                  <el-col :span="5"><el-input v-model="contactData.post" placeholder="职位" /></el-col>
                  <el-col :span="5"><el-input v-model="contactData.phone" placeholder="电话" /></el-col>
                  <el-col :span="2" align="center"> <el-button type="primary" @click="contactAppend">提交</el-button></el-col>
                </el-row>
              </el-form>
            </template>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-form>
  </div>
</template>
<script>
import API from '@/api/client/client'
import { customerStatus } from '@/utils/options'
import { mapGetters } from 'vuex'
export default {
  inject: ['goUrl', 'isEdit', 'add', 'update', 'setStorage', 'clearStorage', 'getStorage'],
  data() {
    return {
      userName: '',
      activeName: 'first',
      data: {},
      title: '',
      editId: '',
      contactData: {},
      customerStatus,
      rules: {
        name: { required: true, message: '请输入公司名称', trigger: 'change' },
        department: { required: true, message: '请输入部门', trigger: 'change' },
        post: { required: true, message: '请输入职务', trigger: 'change' },
        status: { required: true, message: '请选择状态', trigger: 'change' },
        contact_name: { required: true, message: '请输入姓名', trigger: 'change' },
        phone: { required: true, message: '请输入电话', trigger: 'change' },
        tel: { required: true, message: '请输入手机', trigger: 'change' }
      },
      contactRules: {

      },
      contactsList: []
    }
  },
  computed: {
    ...mapGetters(['name'])
  },
  created() {
    const edit = this.isEdit()
    if (edit) {
      this.title = '客户详情'
      this.editId = edit
      this.info()
    } else {
      this.title = '新增客户'
      this.userName = this.name
      if (this.getStorage('customer')) {
        this.data = this.getStorage('customer')
      }
    }
  },
  mounted() {
    window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
  },
  methods: {
    info() {
      API.detail(this.editId).then(res => {
        this.data = res.data
        this.userName = res.data.cr_admin.name
        this.contactsList = res.data.contacts_list
      })
    },
    beforeunloadHandler(e) {
      this.clearStorage('customer')
    },
    cancel() {
      if (!this.editId) {
        this.setStorage('customer', this.data)
      }
      this.goUrl('/customer')
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.editId) {
            this.update(API, this.data, '更新成功', '/customer')
          } else {
            this.add(API, this.data, '新增成功', '/customer/edit/')
            this.clearStorage('customer')
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    contactAppend() {
      this.contactData.customer_id = this.editId
      API.contactsAppend(this.contactData).then(res => {
        if (res.data.error_code === 1) {
          this.$message.success('新增成功')
          this.info()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },

    contactRemove(id) {
      const data = {
        id,
        customer_id: this.editId
      }
      API.contactsRemove(data).then(res => {
        if (res.data.error_code === 1) {
          this.$message.success('删除成功')
          this.info()
        } else {
          this.$message.error(res.data.message)
        }
      })
    }
  }
}
</script>

<style>
.return-form .el-form-item__content{
  width: calc(100% - 100px);
}
</style>
